import React from 'react';
import {
  LineChart, Line, BarChart, Bar, PieChart, Pie, AreaChart, Area,
  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell
} from 'recharts';
import { useSelector } from 'react-redux'
// 内容类型名称映射（英文键 -> 中文显示）
const contentTypeNameMap = {
  text: '纯文本',
  imageText: '图文',
  video: '视频'
};



// 模拟数据


const contentData = [
  { name: '00:00', text: 300, imageText: 200, video: 100 },
  { name: '04:00', text: 200, imageText: 100, video: 50 },
  { name: '08:00', text: 500, imageText: 300, video: 200 },
  { name: '12:00', text: 800, imageText: 500, video: 300 },
  { name: '16:00', text: 700, imageText: 400, video: 250 },
  { name: '20:00', text: 600, imageText: 350, video: 200 },
];



const shareData = [
  { name: 'text', value: 1200 },
  { name: 'imageText', value: 1500 },
  { name: 'video', value: 556 },
];

const authorData = [
  { name: '用法打数据法', contentCount: 1500, clickCount: 32214 },
  { name: '王多余', contentCount: 2100, clickCount: 22745 },
  { name: '请叫我小李', contentCount: 1800, clickCount: 23567 },
  { name: 'Christopher', contentCount: 1743, clickCount: 12586 },
  { name: '一朵追逐月亮的...', contentCount: 1421, clickCount: 12586 },
];

const contentTypeData = [
  { time: '04:00', video: 20, imageText: 50, text: 30 },
  { time: '08:00', video: 59, imageText: 82, text: 18 },
  { time: '12:00', video: 40, imageText: 65, text: 35 },
  { time: '16:00', video: 60, imageText: 75, text: 25 },
  { time: '20:00', video: 70, imageText: 60, text: 40 },
];

const COLORS = ['#8884d8', '#82ca9d', '#ffc658'];

const Home2: React.FC = () => {
  const list1 = useSelector((store: any) => store.list);

  const visitData = [
    { time: '00:00', value: Number(list1.dzs) + 50 },
    { time: '04:00', value: Number(list1.dzs) + 100 },
    { time: '08:00', value: Number(list1.dzs) + 150 },
    { time: '12:00', value: Number(list1.dzs) + 50 },
    { time: '16:00', value: Number(list1.dzs) + 200 },
    { time: '20:00', value: Number(list1.dzs) + 100 },
  ];


  const commentData = [
    { time: list1.time, value: Number(list1.dzs) + 150 },
    { time: list1.time, value: Number(list1.dzs) + 50 },
    { time: list1.time, value: Number(list1.dzs) + 200 },
    { time: list1.time, value: Number(list1.dzs) + 50 },
  
    { time: list1.time, value: Number(list1.dzs) + 50 },

  ];
  return (
    <div style={{
      padding: '20px',
      backgroundColor: '#f5f5f5',
      minHeight: '100vh'
    }}>
      <h1 style={{
        textAlign: 'center',
        marginBottom: '30px',
        color: '#333',
        cursor: 'pointer'
      }}>多数据分析</h1>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(2, 1fr)',
        gap: '20px',
        marginBottom: '20px'
      }}>
        {/* 访问总人数 */}
        <div style={{
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '8px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <h3>不同时间下的点赞数</h3>
          <p style={{
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#333',
            margin: '10px 0'
          }}>12,256 <span style={{
            fontSize: '14px',
            color: 'green',
            fontWeight: 'normal'
          }}>较昨天 +206</span></p>
          <ResponsiveContainer width="100%" height={200}>
            <LineChart data={visitData} margin={{
              top: 5, right: 5, left: 5, bottom: 5
            }}>
              <CartesianGrid strokeDasharray="3 3" vertical={false} />
              <XAxis dataKey="time" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip />
              <Line type="monotone" dataKey="value" stroke="#3498db" strokeWidth={2} />
            </LineChart>
          </ResponsiveContainer>
        </div>

        {/* 内容发布量 */}
        <div style={{
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '8px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <h3>内容发布量</h3>
          <p style={{
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#333',
            margin: '10px 0'
          }}>11,38 <span style={{
            fontSize: '14px',
            color: 'green',
            fontWeight: 'normal'
          }}>较昨天 +405</span></p>
          <ResponsiveContainer width="100%" height={200}>
            <BarChart data={contentData} margin={{
              top: 5, right: 5, left: 5, bottom: 5
            }}>
              <CartesianGrid strokeDasharray="3 3" vertical={false} />
              <XAxis dataKey="name" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip formatter={(value, name) => {
                // 添加Tooltip格式化器
                const displayName = contentTypeNameMap[name as keyof typeof contentTypeNameMap] || name;
                return [`${value}`, displayName];
              }} />
              {/* 为每个Bar添加name属性以显示图例 */}
              <Bar dataKey="text" name="纯文本" stackId="a" fill="#8884d8" />
              <Bar dataKey="imageText" name="图文" stackId="a" fill="#82ca9d" />
              <Bar dataKey="video" name="视频" stackId="a" fill="#ffc658" />
            </BarChart>
          </ResponsiveContainer>
        </div>

        {/* 评论总量 */}
        <div style={{
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '8px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <h3>一天内的点赞数</h3>
          <p style={{
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#333',
            margin: '10px 0'
          }}>4,592 <span style={{
            fontSize: '14px',
            color: 'green',
            fontWeight: 'normal'
          }}>较昨天 +112</span></p>
          <ResponsiveContainer width="100%" height={200}>
            <AreaChart data={commentData} margin={{
              top: 5, right: 5, left: 5, bottom: 5
            }}>
              <CartesianGrid strokeDasharray="3 3" vertical={false} />
              <XAxis dataKey="time" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip />
              <Area type="monotone" dataKey="value" stroke="#3498db" fill="#ebf5fb" />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        {/* 分享总量 */}
        <div style={{
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '8px',
          overflow: 'hidden', // 防止外边距塌陷
          display: 'flex',
          flexDirection: 'column',
          gap: '16px'
        }}>
          <div>
            <h3>分享总量</h3>
            <p style={{
              fontSize: '24px',
              fontWeight: 'bold',
              color: '#333',
              margin: '10px 0'
            }}>3,256 <span style={{
              fontSize: '14px',
              color: 'green',
              fontWeight: 'normal'
            }}>较昨天 +598</span></p>
          </div>
          <ResponsiveContainer width="100%" height={200}>
            <PieChart>
              <Pie
                data={shareData}
                cx="50%"
                cy="50%"
                labelLine={false}
                outerRadius={70}
                fill="#8884d8"
                dataKey="value"
                label={({ name, value }) => {
                  // 手动计算总和确保准确性
                  const total = shareData.reduce((sum, item) => sum + item.value, 0);
                  const percent = total ? ((value ?? 0) / total) * 100 : 0;
                  const displayName = contentTypeNameMap[name as keyof typeof contentTypeNameMap] || '未知类型';
                  return `${displayName} ${percent.toFixed(1)}%`;
                }}
              >
                {shareData.map((_entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                ))}
              </Pie>
              <Tooltip formatter={(value, name) => {
                const displayName = contentTypeNameMap[name as keyof typeof contentTypeNameMap] || '未知类型';
                const numericValue = Number(value ?? 0);
                const total = shareData.reduce<number>((sum, i) => sum + Number(i.value ?? 0), 0);
                const percentage = total > 0 ? (numericValue / total) * 100 : 0;
                return [
                  `${numericValue} 次`,
                  `${displayName} (占比 ${percentage.toFixed(1)}%)`
                ];
              }} />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: '2fr 1fr',
        gap: '20px',
        marginBottom: '20px'
      }}>
        {/* 内容发布比例 */}
        <div style={{
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '8px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <h3>内容发布比例</h3>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={contentData} margin={{
              top: 20, right: 30, left: 20, bottom: 5
            }}>
              <CartesianGrid strokeDasharray="3 3" vertical={false} />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip formatter={(value, name) => {
                // 使用内容类型映射转换显示名称
                const displayName = contentTypeNameMap[name as keyof typeof contentTypeNameMap] || name;
                return [`${value}`, displayName];
              }} />
              <Legend />
              <Bar dataKey="text" name="纯文本" stackId="a" fill="#8884d8" />
              <Bar dataKey="imageText" name="图文" stackId="a" fill="#82ca9d" />
              <Bar dataKey="video" name="视频" stackId="a" fill="#ffc658" />
            </BarChart>
          </ResponsiveContainer>
        </div>

        {/* 热门作者榜单 */}
        <div style={{
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '8px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <h3>热门作者榜单</h3>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '50px 1fr 1fr',
            gap: '10px',
            marginBottom: '10px',
            fontWeight: 'bold',
            paddingBottom: '10px',
            borderBottom: '1px solid #eee'
          }}>
            <div>排名</div>
            <div>作者</div>
            <div>内容量</div>
            <div>点击量</div>
          </div>
          {authorData.map((author, index) => (
            <div key={index} style={{
              display: 'grid',
              gridTemplateColumns: '50px 1fr 1fr',
              gap: '10px',
              padding: '10px 0',
              borderBottom: '1px solid #f5f5f5'
            }}>
              <div>{index + 1}</div>
              <div>{author.name}</div>
              <div>{author.contentCount}</div>
              <div>{author.clickCount.toLocaleString()}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 内容时段分析 */}
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
      }}>
        <h3>内容时段分析</h3>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={contentTypeData} margin={{
            top: 5, right: 30, left: 20, bottom: 5
          }}>
            <CartesianGrid strokeDasharray="3 3" vertical={false} />
            <XAxis dataKey="time" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="video" name="视频类" stroke="#8884d8" strokeWidth={2} />
            <Line type="monotone" dataKey="imageText" name="图文类" stroke="#82ca9d" strokeWidth={2} />
            <Line type="monotone" dataKey="text" name="纯文本" stroke="#ffc658" strokeWidth={2} />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default Home2;